<template>
    <div class="emoji" v-show="emojiFlag">

          <span class="rong-emoji-content" v-for="item in list" v-html="item.node.outerHTML" @click="clickEmoji($event,item)"></span>


    </div>
</template>
<script>
    export default {
      data(){
        return {
            list:[],
            emojiFlag:false
        }
      },
      mounted(){
        let config = {
          size: 24,
          lang: 'zh',
        };
        RongIMLib.RongIMEmoji.init(config);

        this.list =  RongIMLib.RongIMEmoji.list;
       
      },
      methods:{
        clickEmoji(event,item){
          this.emojiFlag = false;
          this.$emit('selectEmoji',item)
        }
      }
    }
</script>
<style scoped lang="scss" type="text/scss">
    .emoji{
        position: absolute;
        left: 0;
        bottom: 40px;
        text-align: left;
        padding-left: 10px;
        cursor:pointer;
        background: #FFFFFF;
    }
</style>